<template>
  <!--  右侧内容-->
  	<div class="Ccollection_cont">
  		<h3 class="cal_mall_tit"><img src="~/assets/img/xinxin.png">我的收藏</h3>
  		<div class="Ccol_box">
  			<div class="cal_mall_zwfl_right">
  				<h4 class="cal_mall_ctitle">我收藏的广告位</h4>
  				<ul class="cal_mall_ccontent af" :style="title.sc.collectServiceRes?'display:block':'display:none'">
  					<li class="item" v-for="(data,id) in title.sc.collectServiceRes?title.sc.collectServiceRes.slice(sl3*16,(sl3+1)*16):[]"  :class="'li'+(id+1)" :key="id">
  						<em>{{data.servicename}}</em>
  						<p>{{data.buyneedscore}}<span>积分</span></p>
  						<div class="sc"  @click="shouc(title.id,data.sid)">
  							<div class="sc_cg"></div>收藏
  						</div>
  						<a href="JavaScript:;" @click="dkgm(data.uid,data.sid)">立即购买</a>
  					</li>
  				</ul>
          <div class="dbqh" :style="title.sc.collectServiceRes?'':'display:none'">
            <span>{{title.sc.countNum}}条</span><a href="javascript:;" @click="syy">上一页</a> <a href="javascript:;" v-for="(i,id) in sl2" @click="qh2(id)" :class="id==sl3?'select':''">{{i}}</a> <a href="javascript:;" @click="xyy">下一页</a>
          </div>
  				<div class="wsc" :class="title.sc.collectServiceRes?'':'select'" >
  				  <img src="~/assets/img/wdsc-no.png" width="251px" height="177px">
  				  <p>还没有任何收藏呐！</p>
  				</div>
  			</div>
  		</div>
      <div class="tc">
        <span>×</span>
        {{tcmsg}}
      </div>
      <div class="gmtc" :class="goumai.select==0?'':'select'">
        <div class="ct">
          <h3>{{goumai.title}}(展示位)</h3>
          <p class="p1"><span>{{goumai.jifen}}</span>积分</p>
          <p class="p2">{{goumai.title}}(展示位)</p>
          <p class="p3">当前拥有积分:{{goumai.userjf}}</p>
          <a href="javascript:;" class="ljgm" @click="gmjf(title.id,goumai.id)">立即购买</a>
          <a href="javascript:;" class="close" @click="gmgb()"></a>
        </div>
      </div>
  	</div>

  <!-- 右侧内容 -->
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    props: ['foobar'],
    data () {
      return {
        title:null,
        id:'',
        sl2:[1],
        sl3:0,
        nihao:'你好呀',
        tcmsg:'',
        tcmsg1:['收藏成功',''],
        tcmsg2:'取消收藏成功',
        selenv:false,
        grzx:{
          bj:'编辑'
        },
        title:null,
        fuwu:1,
        shuju1:{
          one:0,
          two:0,
          three:0,
          four:0,
          five:0
        },
        goumai:{
          title:'',
          jifen:0,
          userjf:0,
          select:0,
          id:0
        }
      }
    },
    async asyncData ({req,params,query}){
    let a = req.headers.cookie;
    let cookie = '';
    if(a.indexOf('userinfoRes')!=-1){
      let b = a.split('userinfoRes=');
      let c = b[1].split(';');
      cookie = c[0];
    }
    let gr = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/userCenterIndexData?userid=`+cookie);
    let nh4 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/myCollectServiceData?userid=`+cookie);

    let data  = {gr:gr.data,sc:nh4.data,id:cookie};
    return { title: data}
  }
  ,
  mounted:function(){
      $('.left .div5 .li1').addClass('select');
      var nb =  Math.ceil(this.title.sc.countNum/16);
      for (let i=1;i<nb+1;i++){
        if(i>1){
          this.sl2.push(i);
        }
      }
      $(document).ready(function(){
        $('.jftca').click(function(){
          $('.jfgztc').addClass('select');
        });
        $('.jfgztc .close').click(function(){
          $('.jfgztc').removeClass('select');
        });

      });

    var _this = this;
    function setCookie(cname,cvalue,exdays)
    {
      var d = new Date();
      d.setTime(d.getTime()+(exdays*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    _this.$axios.get('https://exam.zhonghaiqihang.com/'+'/PInterface/UserCenter/userCenterIndexData',{
      params:{
        num:_this.title.id
      }
    })
      .then(function(response){
        if(response == 'go_signin'){
          setCookie('userinfoRes','',-1);
          _this.$router.push('/');

        }else if(response=='userid_error'){
          setCookie('userinfoRes','',-1);
          _this.$router.push('/');
        }else if(response=='serviceid_error'){
          setCookie('userinfoRes','',-1);
          window.open('/PersonalCenter/','_self');
        }else if(response == '收藏成功'){
          _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+_this.title.id)
            .then(function(response){
            });
        }

      });



  },
  methods:{
    tzlj:function(e){
      // const new3 = this.$router.resolve({name: e});
      // window.open(new3.href,'_self');
      this.$router.push('/'+e);
    },
    tzlj1:function(e){
      // const new3 = this.$router.resolve({name: this.dhlj[e]});
      // window.open(new3.href,'_self');
      this.$router.push(e);
    },
    tc:function(e1,e2,e3){
      var d = new Date();
      d.setTime(d.getTime()+(e3*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = e1 + "=" + e2 + "; " + expires;
      this.$router.push('/');
    },
    xqymtz:function(e1,e2){
      let href = '/ServiceDetails/'+e1+'?name='+e2;
      window.open(href,'_blank');
    },zkss:function(){
      $('.searchs').toggleClass('select');
    },
    qh:function(e1,e2){
      if(e1==1){
        this.shuju1.one =e2;
      }else if(e1==2){
        this.shuju1.two =e2;
      }else if(e1==3){
        this.shuju1.three =e2;
      }else if(e1==4){
        this.shuju1.four =e2;
      }else if(e1==5){
        this.shuju1.five =e2;
      }
    },
    qh2:function(e){
      this.sl3= e;
    },
    gmgb:function(){

      this.goumai.select = 0;
    },
    dkgm:function(e1,e2){
      var _this = this;
      this.goumai.select = 1;
      _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/showNumBuyData',{
        params:{
          userid:e1,
          serviceid:e2
        }
      })
        .then(function(response){
          _this.goumai.title = response.data.servicename;
          _this.goumai.jifen = response.data.buyneedscore;
          _this.goumai.userjf = response.data.userscore;
          _this.goumai.id = e2;


        });

    },
    gmjf:function(e1,e2){
      var _this = this;
      var sj;
      sj = 'userid='+e1+'&serviceid='+e2;
      _this.$axios.post('/api'+'/PInterface/UserCenter/showNumBuyOperation',sj)
        .then(function(response){
          _this.goumai.select = 0;
          // alert(response.data);
          _this.tcmsg= response.data;
          $('.tc').addClass('select');
          setTimeout(function(){
            //your codes
            window.location.reload()
          },800);


        });
    },
    syy:function(){
      if(this.sl3>0){
        this.sl3= this.sl3-1;
      }
    },
    xyy:function(){
      var nb =  Math.ceil(this.title.sc.countNum/16);
      if(this.sl3<nb-1){
        this.sl3= this.sl3+1;
      }
    },
    shouc:function(e1,e2){
      var _this = this;
      function setCookie(cname,cvalue,exdays)
      {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
      }
      _this.$axios.post('api/PInterface/UserCenter/collectOperation','userid='+e1+'&serviceid='+e2
      )
        .then(function(response){
          // _this.xianqu = response.data;

          if(response.data == 'go_signin'){
            setCookie('userinfoRes','',-1);
            _this.$router.push('/');

          }else if(response.data=='userid_error'){
            setCookie('userinfoRes','',-1);
            _this.$router.push('/');
          }else if(response.data=='serviceid_error'){
            setCookie('userinfoRes','',-1);
            window.open('/PersonalCenter/','_self');
          }else if(response.data== '收藏成功'){
            _this.tcmsg= '收藏成功';
            $('.hh-login .tc').addClass('select');
            $('.tc').fadeIn(0);
            $('.tc').fadeOut(2500);
            _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/myCollectServiceData?userid='+_this.title.id)
              .then(function(response){
                _this.title.sc = response.data;

              });
          }else if(response.data== '取消收藏成功'){
            $('.hh-login .tc').addClass('select');
            _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/myCollectServiceData?userid='+_this.title.id)
              .then(function(response){
                _this.title.sc = response.data;
                _this.tcmsg= '取消收藏成功';
                $('.hh-login .tc').addClass('select');
                $('.tc').fadeIn(0);
                $('.tc').fadeOut(2500);
                // var test1 = setTimeout(function(){
                //   //your codes
                //   $('.hh-login .tc').removeClass('select');
                // },1000);
              });
          }

        });


    }
  }


  }
</script>

<style scoped="scoped">

  .tc {
    position: fixed;
    display: none;
    padding: 0 10px;
    min-width: 280px;
    height: 180px;
    line-height: 180px;
    color: white;
    text-align: center;
    top: 50%;
    left: 50%;
    z-index: 1000;
    margin-top: -90px;
    margin-left: -140px;
    background: rgba(0, 0, 0, .6);
    font-size: 18px;
    border-radius: 8px;
  }

  .tc.select {
    display: block;
  }

  .tc span {
    display: block;
    position: absolute;
    top: 8px;
    line-height: 28px;
    right: 10px;
    font-size: 28px;
    color: white;
  }

</style>
